<template>
    <div class="container">
        <el-row class="wrap-search">
            <el-button @click="" type="primary" size="medium" @click="delAll">批量删除</el-button>
        </el-row>
        <el-row class="wrap-search">
            <div class="search-item">
                <div class="search-title">用户昵称：</div>
                <el-input style="width: 200px;" class=""
                placeholder="请输入用户昵称"
                v-model="configList.param.nicknameLike" ></el-input>
            </div>
            <el-button  class="search-btn" type="primary" @click="getList()">查询</el-button>
        </el-row>
        <div class="">
            <table-list ref="tableList" :tableConfig='configList' @selectTable="selectTable">
                <el-table-column
                        slot="select"  align="center" label="全选"
                        type="selection"
                        width="55">
                </el-table-column>
                  <el-table-column slot="image"  align="center" label="用户头像">
                      <template slot-scope="scope">
                        <!--<img class="video-img" :src="scope.row.avatarUrl" alt="">-->
                          <div :style="{backgroundImage: 'url('+scope.row.avatarUrl+')'}" style="width: 60px;height: 60px;background-size: cover;border-radius: 30px;margin: 0 auto;"></div>
                      </template>
                  </el-table-column>
                  <el-table-column class="btn"  min-width="240px" label="操作" slot="btn" align="center" >
                    <template slot-scope="scope">
                       <el-button  @click="$router.push('/userEdit?id='+scope.row.id)" type="primary" size="small">查看</el-button>
                       <el-button  class="search-btn" size="small" type="danger" @click="delLevel(scope.row.id)">删除</el-button>
                       <!-- <el-button v-if="scope.row.isRefundBtn == 'y'" class="search-btn" size="small" type="danger" @click="refundBtn(scope.row.id)">退款</el-button> -->
                    </template>
                  </el-table-column>
            </table-list>
        </div>
        <el-dialog
            :visible.sync="dialogVisible"
            size="tiny"
            >
            <img :src="imgUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js');
let common = require("../../common.js");
export default {
    data() {
        return { 
            configList:{
                url:CONSTANT.URL.USERCORE.LIST,
                configList:[
                    {
                       slot: "select"
                    },
                    {  
                      slot:'image'
                    },
                    {
                       label:'姓名',
                       prop:'nickname'
                    },
                    {
                       label:'联系电话',
                       prop:'mobile'
                    },
                    {
                       label:'身份证',
                       prop:'idNo'
                    },
                    {
                       label:'性别',
                       prop:'sexText'
                    },
                    {
                        label:'公司名称',
                        prop:'company'
                    },
                    {
                      slot:'btn'
                    }
                ],
                param:{
                    nicknameLike: ""
                },
                type:'',
                width:'',
                isPagination:true
            },
            dialogVisible:false,
            dialogVisible1:false,
            imgUrl:'',
            upLoadUrl:'',
            dataList:[],
            provinceList:[],
            cityList:[],
            statusArr:{
                'on':'上架',
                'off':'下架'
            },
            statusArrList:[
                {
                    item:'',
                    value:'全部'
                },
                {
                    item:'ing',
                    value:'众筹中'
                },
                {
                    item:'success',
                    value:'众筹成功'
                },
                {
                    item:'fail',
                    value:'众筹失败'
                },
                {
                    item:'off',
                    value:'下架'
                }
            ],
            ids: []
        }
    },
    components: {
        'table-list':() => import('../common/my-table')
    },  
    watch:{
        'configList.param.provinceCode':function(val){
            this.cityList = [];
            this.configList.param.cityCode  = ''
            this.getCityList()
        }
    },
    created(){

    },
    mounted() {

    },
    methods: {
        getProvince:function(){
            let url = CONSTANT.URL.COMMON.GETPROVINCELIST,
                data={}
            common.requestAjax(url,{},data,(res)=>{
                if(res.status == 200){
                    this.provinceList = res.data.bussData;
                }
            }
            )
        },
        getCityList:function(){
            let url = CONSTANT.URL.COMMON.GETCITYLIST+'/'+this.configList.param.provinceCode,
                data={}
            common.requestAjax(url,{},data,(res)=>{
                if(res.status == 200){
                    this.cityList = res.data.bussData;
                }
            }
            )
        },
        getList(){
            this.$refs.tableList.getList()
        },
        imgClick(url){
            this.imgUrl = url;
            this.dialogVisible = true;
        },
        showPage(id){
            this.dialogVisible1 = true;
            this.getNums(id)
        },
        hotBtn(id,state){
            let  url = CONSTANT.URL.CAR.SAVEHOT,
                dataForm = {},
                data = {
                    isHot:state?'':1,
                    id:id
                };
            common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
        },
        delLevel(id){
            this.$confirm('确定删除?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.USERCORE.DELETEITEM,
                    param = {id: id}
                common.requestAjax(url,{},param,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消删除'           
                });                   
            });   
        },
        upBtn(id){
            this.$confirm('确定上架?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.CAR.SETDELETE,
                    param = {id:id,status:'on'}
                common.requestAjax(url,JSON.stringify(param),null,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消上架'           
                });                   
            });   
        },
        downBtn(id){
            this.$confirm('确定下架?', '提示', {           
                confirmButtonText: '确定',           
                cancelButtonText: '取消',           
                type: 'warning'         
            }).then(() => {           
                let  url = CONSTANT.URL.CAR.SETDELETE,
                    param = {id:id,status:'off'}
                common.requestAjax(url,JSON.stringify(param),null,(res)=>{
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({           
                            message: res.msg,           
                            type: 'warning'         
                        });
                    }
                }) 
   
            }).catch(() => {           
                this.$message({             
                    type: 'info',             
                    message: '已取消下架'           
                });                   
            });   
        },
        handleRemove(file, fileList) {      // 图片上传
            let deleteUrl = file.url;
            let list = this.information.images;
            list.forEach(function(item,index){
                if(item.fileUrl == deleteUrl){
                    list.splice(index,1);
                }
            })
            console.log(list);
            this.information.images = list;
        },       
        handlePictureCardPreview(file) {    
            this.dialogImageUrl = file.url;         
            this.dialogVisible = true;      
        },
        handleFileSuccess(res, file) {
            if(res.status == 200){
                let picItem = res.data.bussData;
                this.information.images.push(picItem);
                this.fileListChange();
            }
        },
        selectTable(val) {
            console.log(val)
            this.ids = []
            val.map( item => {
                this.ids.push(item.id)
            })
        },
        delAll() {
            if (!this.ids.length) {
                this.$message({
                    type: 'warning',
                    message: '请选择批量删除的记录'
                });
                return false;
            }
            this.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let url = CONSTANT.URL.USERCORE.DELETES;
                common.requestAjax(url, {}, {ids: this.ids}, (res) => {
                    if(res.status == 200){
                        this.$message({
                            type: 'success',
                            message:res.msg
                        });
                        this.getList();
                    }else{
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style lang="scss">
    .container {
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
                .el-input,.el-select{
                    width: 180px;
                }
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            .cell{
                button{
                    margin-top: 10px;
                }
            }
            video{
                width: 100px;height: auto;
            }
            img.video-img{
                width: 60px;height: 60px;
                cursor: pointer;
                border-radius: 30px;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{
            img{
                display: block;
                margin: 0 auto;
            }
        }
        .user-num{
            color:#409EFF;
            cursor: pointer;
        }
        
        .avatar{
            width: 50px!important;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }
    }
</style>
